---
title: Links
image: /images/user-guide/what-is-twenty/20.png
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
</Frame>

## Link de Contato

Um componente de link estilizado para exibir informações de contato.

<Tabs>
<Tab title="Usage">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:example@example.com"
        onClick={handleLinkClick}
      >
        example@example.com
      </ContactLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| Props     | Tipo                                     | Descrição                                                     |
| --------- | ---------------------------------------- | ------------------------------------------------------------- |
| className | Nome opcional para estilização adicional | Nome opcional para estilização adicional                      |
| href      | Nome opcional para estilização adicional | O URL ou caminho de destino para o link                       |
| onClick   | função                                   | Função de retorno de chamada acionada quando o link é clicado |
| filhos    | `React.ReactNode`                        | O conteúdo a ser exibido dentro do link                       |

</Tab>

</Tabs>

## Link Cru

Um componente de link estilizado para exibir links.

<Tabs>
<Tab title="Usage">

```jsx
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

```

</Tab>
<Tab title="Props">

| Props     | Tipo                                     | Descrição                                                     |
| --------- | ---------------------------------------- | ------------------------------------------------------------- |
| className | Nome opcional para estilização adicional | Nome opcional para estilização adicional                      |
| href      | Nome opcional para estilização adicional | O URL ou caminho de destino para o link                       |
| onClick   | função                                   | Função de retorno de chamada acionada quando o link é clicado |
| filhos    | `React.ReactNode`                        | O conteúdo a ser exibido dentro do link                       |

</Tab>
</Tabs>

## Link Arredondado

Um link com estilo arredondado com um componente Chip para links.

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};
```

</Tab>

<Tab title="Props">

| Props    | Tipo                                     | Descrição                                                     |
| -------- | ---------------------------------------- | ------------------------------------------------------------- |
| href     | Nome opcional para estilização adicional | O URL ou caminho de destino para o link                       |
| filhos   | `React.ReactNode`                        | O conteúdo a ser exibido dentro do link                       |
| aoClicar | função                                   | Função de retorno de chamada acionada quando o link é clicado |

</Tab>
</Tabs>

## Link Social

Links sociais estilizados, com suporte para vários tipos de links sociais, como URLs, LinkedIn e X (ou Twitter).

<Tabs>
<Tab title="Usage">

```jsx
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| Props   | Tipo                                     | Descrição                                                                                                 |
| ------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| href    | Nome opcional para estilização adicional | O URL ou caminho de destino para o link                                                                   |
| filhos  | `React.ReactNode`                        | O conteúdo a ser exibido dentro do link                                                                   |
| tipo    | Nome opcional para estilização adicional | O tipo de links sociais. As opções incluem: `url`, `LinkedIn` e `Twitter` |
| onClick | função                                   | Função de retorno de chamada acionada quando o link é clicado                                             |

</Tab>
</Tabs>
